<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta 名称="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>渲染英雄列表案例</title>
	<link rel="stylesheet" href="css/hero.css">
</head>

<body>
	<!-- 利用对象数组渲染英雄列表案例 -->
	<!-- <ul class="列表">
		<li><img src="uploads/heros/01.jpg" title="司马懿"></li>
	</ul> -->
	<script>
		const 数组_对象 = [
			{ 名称: '司马懿', 图片编号: '01.jpg' },
			{ 名称: '女娲', 图片编号: '02.jpg' },
			{ 名称: '百里守约', 图片编号: '03.jpg' },
			{ 名称: '亚瑟', 图片编号: '04.jpg' },
			{ 名称: '虞姬', 图片编号: '05.jpg' },
			{ 名称: '张良', 图片编号: '06.jpg' },
			{ 名称: '安其拉', 图片编号: '07.jpg' },
			{ 名称: '李白', 图片编号: '08.jpg' },
			{ 名称: '阿珂', 图片编号: '09.jpg' },
			{ 名称: '墨子', 图片编号: '10.jpg' },
			{ 名称: '鲁班', 图片编号: '11.jpg' },
			{ 名称: '嬴政', 图片编号: '12.jpg' },
			{ 名称: '孙膑', 图片编号: '13.jpg' },
			{ 名称: '周瑜', 图片编号: '14.jpg' },
			{ 名称: 'XXX', 图片编号: '15.jpg' },
			{ 名称: 'XXX', 图片编号: '16.jpg' },
			{ 名称: 'XXX', 图片编号: '17.jpg' },
			{ 名称: 'XXX', 图片编号: '18.jpg' },
			{ 名称: 'XXX', 图片编号: '19.jpg' },
			{ 名称: 'XXX', 图片编号: '20.jpg' }
		]

		function 渲染列表() {
			document.write('<ul class="列表">') // 标签头部
			// 中间 li部分
			for (let 元素 of 数组_对象) {
				document.write(`<li><img src="uploads/heros/${元素.图片编号}" title=${元素.名称}></li>`)
			}
			document.write('</ul>') // 标签尾部
		}

		// 调用函数
		渲染列表()

	</script>
</body>

</html>